<template>
	<div>
		<div style="line-height: 40px; margin-bottom: 8px;">
			<el-row>
				<el-col :span="1">
					<span>状态：</span>
				</el-col>
				<el-col :span="5">
					<el-select v-model="search.status" clearable placeholder="请选择">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-col>
				<el-col :span="2">
					<span>任务名：</span>
				</el-col>
				<el-col :span="5">
					<el-input v-model="search.name" placeholder="请输入要查询的任务名" />
				</el-col>
				<el-col :span="1" >
					<el-button type="primary" @click="searchTask()" icon="el-icon-search">搜索</el-button>
				</el-col>
				<el-col :span="3":push="1">
					<el-select v-model="uploadData.projectName" filterable placeholder="请选择項目">
						<el-option v-for="item in names" :key="item" :label="item" :value="item">
						</el-option>
					</el-select>
				</el-col>
				<el-col :span="1" :push="2">
					<el-upload
					        :show-file-list="false"
					        :before-upload="beforeUpload"
					        :on-success="onSuccess"
					        :on-error="onError"
							:data="uploadData"
					        :disabled="importDisabled"
					        style="display: inline-flex;margin-right: 10px;"
					        action="http://localhost:8082/task/import">
					    <el-button  :disabled="importDisabled" type="success" :icon="importDataIcon">
					        {{importDataText}}
					    </el-button>
					</el-upload>
				</el-col>
				<el-col :span="3" :push="4">
					<el-button type="success" ><i class="el-icon-download"><a style="text-decoration: none;color: white" href="/static/doc/导入模板.xlsx">导入模板下载</a></i></el-button>
				</el-col>
			</el-row>
		</div>
		<div class="leftlist">
			<div style="margin-top: 8px;">项目列表</div>
			<el-scrollbar>
				<ul class="ul" style="height: 500px;margin-top: 6px;">
					<li class="line" v-for="item in names">
						<a style="font-size: 12px;cursor: pointer;" @click="getChoose(item)">{{ item }}</a>
					</li>
				</ul>
			</el-scrollbar>
		</div>
		<div style="width: 1120px; display: inline-block,;float: right;">
			<el-table ref="tableSort" height="520px" border :data="result.tableData" :header-cell-style="{ textAlign: 'center' }"
			 class="pro-det-bottom" :default-sort="{ prop: 'date', order: 'descending' }" size="mini">
				<el-table-column prop="id" label="ID" sortable align="center" width="59"></el-table-column>
				<el-table-column prop="name" label="任务名" sortable width="130"></el-table-column>
				<el-table-column prop="details" label="内容" width="250"></el-table-column>
				<el-table-column prop="project" label="所属项目" width="135"></el-table-column>
				<el-table-column prop="assign" label="委派" width="60"></el-table-column>
				<el-table-column prop="stime" label="计划开始时间" width="95"></el-table-column>
				<el-table-column prop="classHours" label="课时" align="center" width="45"></el-table-column>
				<el-table-column prop="etime" label="计划结束时间" width="95"></el-table-column>
				<el-table-column prop="status" label="状态" :formatter="statuFormat" width="58px"></el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-tooltip content="开始任务" v-if="scope.row.status != 1" :visible-arrow="false" placement="bottom" effect="light">
							<el-button type="primary" icon="el-icon-video-play" circle size="mini" style="font-size: 14px; color: white"
							 @click="start(scope.row)"></el-button>
						</el-tooltip>
						<el-tooltip content="暂停任务" v-if="scope.row.status == 1" :visible-arrow="false" placement="bottom" effect="light">
							<el-button type="primary" icon="el-icon-video-pause" circle size="mini" style="font-size: 14px; color: white"
							 @click="pause(scope.row)"></el-button>
						</el-tooltip>
						<el-tooltip content="完成" v-if="scope.row.status != 3" :visible-arrow="false" placement="bottom" effect="light">
							<el-button type="primary" icon="el-icon-check" circle size="mini" style="font-size: 14px; color: white" @click="complete(scope.row)"></el-button>
						</el-tooltip>
						<el-tooltip content="取消" :visible-arrow="false" placement="bottom" effect="light">
							<el-button type="primary" icon="el-icon-delete-solid" circle size="mini" style="font-size: 14px; color: white"
							 @click="cancel(scope.row)"></el-button>
						</el-tooltip>
						<el-tooltip content="编辑" :visible-arrow="false" placement="bottom" effect="light">
							<el-button type="primary" icon="el-icon-edit" circle size="mini" style="font-size: 14px; color: white" @click="edit(scope.row.id)"></el-button>
						</el-tooltip>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<el-pagination
		    style="margin-left:140px;"
		    background
		    layout="prev, pager, next"
		    :page-count="result.pages"
		    :current-page.sync="query.pageNo"
		    :page-size="query.pageSize"
		    @current-change="getData()"
		></el-pagination>
		<el-dialog :title="title" :visible.sync="show" @close="getData()" width="800px">
			<Edit v-if="show" :show.sync="show" @getData="getData()" :status="status" :editid="editid"></Edit>
		</el-dialog>
	</div>
</template>
<script>
	import axios from '../../utils/axiosutils.js';
	import Edit  from "./edit.vue"
	export default {
		name: '',
		data() {
			return {
				uploadData:{
					projectName:""
				},
				title: '',
				show: false,
				title2: '',
				show2: false,
				names: [],
				result: {
					tableData: [],
					pages: 0
				},
				query: {
					project: '',
					pageNo: 1,
					pageSize: 8
				},
				search: {
					status: '',
					name: ''
				},
				options: [{
					value: '0',
					label: '未开始'
				}, {
					value: '1',
					label: '进行中'
				}, {
					value: '2',
					label: '已暂停'
				}, {
					value: '3',
					label: '已完成'
				}, {
					value: '4',
					label: '已取消'
				}, {
					value: '5',
					label: '已关闭'
				}, {
					value: '6',
					label: '已逾期'
				}],
				// 导入按钮的文本
				importDataText: '导入数据',
				// 导入按钮的图标
				importDataIcon: 'el-icon-upload2',
				// 导入按钮是否被禁用
				importDisabled: false
			};
		},
		components: {
			Edit
			
		},
		created() {
			if (this.$route.params.status) {
				this.search.status = this.$route.params.status;
				this.searchTask();
			}
			this.getData();
		},
		methods: {
			getData() {
				axios.get('/task/list', resp => {
					this.result.tableData = resp.obj.records;
					this.result.pages = resp.obj.pages;
				}, this.query);
				axios.get('/project/myProjects', resp => {
					this.names = resp.obj.names;
				});
			},
			statuFormat(row) {
				if (row.status == 0) {
					return '未开始';
				} else if (row.status == 1) {
					return '进行中';
				} else if (row.status == 2) {
					return '已暂停';
				} else if (row.status == 3) {
					return '已完成';
				} else if (row.status == 4) {
					return '已取消';
				} else if (row.status == 4) {
					return '已关闭';
				}
			},
			getChoose(item) {
				this.query.project = item;
				axios.get('/task/list', resp => {
					this.result.tableData = resp.obj.records;
					this.result.pages = resp.obj.pages;
				}, this.query);
			},
			start(row) {
				axios.post('/task/stastart', resp => {
					this.$notify.success({
						title: 'Info',
						message: '成功开启',
						showClose: false,
						offset: 20
					});
					this.getData();
				}, {
					id: row.id
				});
			},
			pause(row) {
				axios.post('/task/stapuase', resp => {
					this.$notify.success({
						title: 'Info',
						message: '成功暂停',
						showClose: false,
						offset: 20
					});
					this.getData();
				}, {
					id: row.id
				});
			},
			complete(row) {
				axios.post('/task/stacomplete', resp => {
					this.$notify.success({
						title: 'Info',
						message: '成功完成',
						showClose: false,
						offset: 20
					});
					this.getData();
				}, {
					id: row.id
				});
			},
			cancel(row) {
				axios.post('/task/stacancel', resp => {
					this.$notify.success({
						title: 'Info',
						message: '成功取消',
						showClose: false,
						offset: 20
					});
					this.getData();
				}, {
					id: row.id
				});
			},
			
			importTask() {
				this.title2 = "导入数据"
				this.show2 = true;
			},
			searchTask() {
				if (this.search.status == 6) {
					axios.post("/task/searchOverdue", resp => {
						this.result.tableData = resp.obj;
					}, {
						name: this.search.name
					})
				} else {
					axios.post("/task/search", resp => {
						this.result.tableData = resp.obj;
					}, {
						name: this.search.name,
						status: this.search.status
					})
				}
			},
			// 导入文件失败后回调
			onError() {
				this.importDataText = '导入数据';
				this.importDataIcon = 'el-icon-upload2';
				this.importDisabled = false;
				this.getData();
				this.$message.success("导入失败！");
			},
			// 导入文件成功后回调
			onSuccess() {
				// 成功后文本修改为原来的导入数据
				this.importDataText = '导入数据';
				// 图标修改
				this.importDataIcon = 'el-icon-upload2';
				// 将上传组件改为允许使用
				this.importDisabled = false;
				// 调用刷新数据的方法
				this.getData();
				// message 弹出消息
				this.$message.success("导入成功！");
			},
			// 上传文件调用
			beforeUpload() {
				console.log(this.uploadData.projectName)
				if(this.uploadData.projectName==""){
					this.$message.warning("还未选择项目再上传")
					return  false
				}else{
					
				// 将文本修改为正在导入
				this.importDataText = '正在导入';
				// 修改其图标
				this.importDataIcon = 'el-icon-loading';
				// 将其上传组件暂时禁用
				this.importDisabled = true;
				}
				
			},
			edit(id){
				this.show=true;
				this.editid=id;
				this.title="编辑任务"
			}
		},
		mounted() {}
	};
</script>
<style scoped>
	.leftlist {
		display: inline-block;
		width: 120px;
		height: 520px;
		text-align: center;
		box-shadow: 2px 2px 2px 2px #6699cc;
	}

	.line :hover {
		color: #000fff;
	}
</style>
